<template>
  <div class="page-main" v-loading="loading">
    <div class="page-container">
      <div class="page-title">
        已标注图片
      </div>
      <div class="page-body">
        <el-tabs v-model="activeName" @tab-click="handleTabClick">
          <el-tab-pane
            v-for="(item, index) in hasTagList"
            :key="index"
            :name="item.classifyId">
            <span slot="label">{{item.classifyName}}({{item.count}})</span>
          </el-tab-pane>
        </el-tabs>
        <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
        <el-checkbox-group class="img-list" v-model="checkedImages" @change="handleImageChange">
          <div class="img-item" v-for="(item, index) in tableData" :key="index">
            <el-checkbox :label="item.id"></el-checkbox>
            <el-image
              style="width: 100px; height: 100px"
              :src="item.thumbnailRelativePath"
              :preview-src-list="[item.relativePath]"
              :fit="'cover'">
            </el-image>
          </div>
        </el-checkbox-group>
        <mine-pagination
          @numberChange="numberChange"
          :total="total"
          :page-size="pageSize"
          :current-page="currentPage">
        </mine-pagination>
      </div>
    </div>
    <tagChoose ref="tagChoose" @change="handleTagChange" :tagList="tagList"></tagChoose>
    <div class="btn-row">
      <el-button type="primary" @click="submit">确认</el-button>
      <el-button @click="goBack">返 回</el-button>
    </div>
  </div>
</template>
<script>
import { detailMixins } from '../../mixins.js';
import tagChoose from '../../components/tagChoose.vue';
import { omit } from 'lodash';

export default {
  mixins: [detailMixins],
  components: {
    tagChoose,
  },
  data () {
    return {
      loading: false,
      tableData: [],
      total:0,
      pageSize:10,
      currentPage: 1,
      multipleSelection: [],
      curTag: '',
      isIndeterminate: false,
      checkedImages: [],
      checkAll: false,
      tagList: [],
      activeName: '',
      hasTagList: []
    }
  },
  methods: {
    async init () {
      await this.loadHasTag();
      // 加载数据
      this.loadData(true);
      // 加载标签信息
      this.loadTag();
    },
    async loadData (flag) {
      if (flag) {
        this.currentPage = 1;
      }
      const classify = this.hasTagList.find(item => item.classifyId === this.activeName);
      if (!classify) {
        this.tableData = [];
        this.total = 0;
        this.clearImageChoose();
        return;
      }
      const params = {
        id: this.calibrationId,
        finisher: this.finisher,
        page: this.currentPage,
        pageSize: this.pageSize,
        completed: '1',
        classifyId: classify.classifyId,
        classifyName: classify.classifyName
      };
      this.loading = true;
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationGetImgCalibrate', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tableData = data.list && data.list.length ? data.list : [];
          this.total = data.rowCount;
        } else {
          this.tableData = [];
          this.total = 0;
        }
      } catch (e) {
        console.error(e);
      }
      this.clearImageChoose();
      this.loading = false;
    },
    async loadHasTag () {
      const params = {
        calibrationDetailsId: this.id,
        finisher: this.finisher,
      };
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationCountImgHascalibrated', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.hasTagList = data && data.length ? data : [];
          if (this.hasTagList.length) {
            if (!this.activeName || !this.hasTagList.find(item => item.classifyId === this.activeName)) {
              this.activeName = this.hasTagList[0].classifyId;
            }
          }
        } else {
          this.hasTagList = [];
          this.activeName = '';
        }
      } catch (e) {
        console.error(e);
      }
    },
    async loadTag () {
      const params = {
        calibrationId: this.calibrationId,
      };
      try {
        const res = await this.$store.dispatch('tagAdminClassifySearch', params);
        const result = res.data || {};
        if (result.success) {
          const data = result.data || {};
          this.tagList = data && data.length ? data : [];
        } else {
          this.tagList = [];
        }
      } catch (e) {
        console.error(e);
      }
    },
    async submit () {
      const curTag = this.curTag;
      const curImageArr = this.checkedImages;
      const curImageList = this.tableData.filter(item => curImageArr.includes(item.id));
      if (!curImageArr.length) {
        this.$message({ type: 'warning', message: '请选择图片' });
        return;
      }
      if (!curTag) {
        this.$message({ type: 'warning', message: '请选择标签' });
        return;
      }
      const params = {
        calibrationId: this.id,
        list: []
      };
      const curTagItem = this.tagList.find(item => item.id === curTag);
      params.list = curImageList.map(item => {
        return {
          ...omit(item, ['relativePath', 'thumbnailRelativePath']),
          completed: '1',
          classifyId: curTagItem.id,
          classifyName: curTagItem.classifyName,
        };
      });
      this.loading = true;
      try {
        const res = await this.$store.dispatch('tagAdminCalibrationIdSaveImgCalibrate', params);
        const result = res.data || {};
        if (result.success) {
          this.$message({ type: 'success', message: '提交成功' });
          this.$parent.init();
        } else {
          this.$message({ type: 'error', message: '提交失败' });
        }
      } catch (e) {
        console.error(e);
      }
      this.loading = false;

    },
    clearImageChoose () {
      this.checkAll = false;
      this.checkedImages = [];
      this.isIndeterminate = false;
    },
    handleCheckAllChange (val) {
      this.checkedImages = val ? this.tableData.map(item => item.id) : [];
      this.isIndeterminate = false;
    },
    handleImageChange (value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.tableData.length;
      this.isIndeterminate = checkedCount > 0 && checkedCount < this.tableData.length;
    },
    handleTagChange (value) {
      this.curTag = value;
    },
    handleTabClick () {
      this.loadData(true);
    },
    numberChange (val) {
      switch (val.flag) {
        case 'pageSize':
          this.pageSize = val.pageSize;
          this.loadData(true);
          break;
        case 'currentPage':
          this.currentPage = val.currentPage;
          this.loadData(false);
          break;
        default:
          break;
      }
    },
  }
}
</script>
<style lang="less" scoped>
@import url('./page.less');

</style>
